<template>
  <div class="warp">
    <div class="content">
      <div class="top">
        <div class="item">
          <img src="@/assets/images/icons/icon_box_36.png" alt="" />
          <div class="value">71235</div>
          <div class="bottom_title">今日物质总量</div>
        </div>
        <div class="item">
          <img src="@/assets/images/icons/icon_tourist_36.png" alt="" />
          <div class="value">32765</div>
          <div class="bottom_title">今日旅客总数</div>
        </div>
        <div class="item">
          <img src="@/assets/images/icons/icon_tourist_36.png" alt="" />
          <div class="value">10254</div>
          <div class="bottom_title">今日出市人数</div>
        </div>
      </div>
      <div class="bottom">
        <div class="item">
          <img src="@/assets/images/icons/icon_flight_36.png" alt="" />
          <div class="value">862</div>
          <div class="bottom_title">今日航班总数</div>
        </div>
        <div class="item">
          <img src="@/assets/images/icons/icon_seat_36.png" alt="" />
          <div class="value">312</div>
          <div class="bottom_title">今日机位使用数</div>
        </div>
        <div class="item">
          <img src="@/assets/images/icons/icon_booking_36.png" alt="" />
          <div class="value">86%</div>
          <div class="bottom_title">今日订座率</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  @include MarginTop(30);
  .top {
    display: flex;
    justify-content: space-between;
    @include hHeight(75);
    .item {
      position: relative;
      @include Width(100);
      @include hHeight(53);

      .value {
        position: absolute;
        left: 70%;
        top: 25%;
        @include FontSize(18);
        color: #a2d5fe;
      }

      .bottom_title {
        @include MarginLeft(10);
        @include FontSize(14);
        color: #e3e3e3;
      }
    }
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    @include hHeight(94);
    @include MarginTop(15);
    .item {
      position: relative;
      @include Width(100);
      @include hHeight(53);

      .value {
        position: absolute;
        left: 70%;
        top: 25%;
        @include FontSize(18);
        color: #a2d5fe;
      }

      .bottom_title {
        @include MarginLeft(10);
        @include FontSize(14);
        color: #e8e8e8;
      }
    }
  }
}
</style>
